import React, { useContext, useState, useEffect, useRef ,Component} from 'react';
import {Container} from './style'
import { Table, Input, Button, Popconfirm, Form,Space ,DatePicker, } from 'antd';
import locale from "antd/es/date-picker/locale/zh_CN";
const EditableContext = React.createContext();
const { RangePicker } = DatePicker;

const EditableRow = ({ index, ...props }) => {
  const [form] = Form.useForm();
  return (
    <Form form={form} component={false}>
      <EditableContext.Provider value={form}>
        <tr {...props} />
      </EditableContext.Provider>
    </Form>
  );
};

const EditableCell = ({
  title,
  editable,
  children,
  dataIndex,
  record,
  handleSave,
  ...restProps
}) => {
  const [editing, setEditing] = useState(false);
  const inputRef = useRef();
  const form = useContext(EditableContext);
  useEffect(() => {
    if (editing) {
      inputRef.current.focus();
    }
  }, [editing]);

  const toggleEdit = () => {
    setEditing(!editing);
    form.setFieldsValue({
      [dataIndex]: record[dataIndex],
    });
  };

  const save = async (e) => {
    try {
      const values = await form.validateFields();
      toggleEdit();
      handleSave({ ...record, ...values });
    } catch (errInfo) {
      console.log('Save failed:', errInfo);
    }
  };

  let childNode = children;

  if (editable) {
    childNode = editing ? (
      <Form.Item
        style={{
          margin: 0,
        }}
        name={dataIndex}
        rules={[
          {
            required: true,
            message: `${title} is required.`,
          },
        ]}
      >
        <Input ref={inputRef} onPressEnter={save} onBlur={save} />
      </Form.Item>
    ) : (
      <div
        className="editable-cell-value-wrap"
        style={{
          paddingRight: 24,
        }}
        onClick={toggleEdit}
      >
        {children}
      </div>
    );
  }

  return <td {...restProps}>{childNode}</td>;
};

// import connect from './connect'
// @connect
class index extends Component {
  constructor(props) {
    super(props);
    this.columns = [
      {
        title: "序号", //表头标题
        dataIndex: "key", //数据源
        editable: true,
      },
      {
        title: "申领单号",
        dataIndex: "number",
        editable: true,
      },
      {
        title: "申领部门",
        dataIndex: "department",
        editable: true,
        render(department) {
          let config = {
            1: "教务处",
            2: "办公室",
            3: "信息中心",
            4: "总务处",
          };
          return config[department];
        },
      },
      {
        title: "申领日期",
        dataIndex: "date",
        editable: true,
      },
      {
        title: "申领类型",
        dataIndex: "type",
        editable: true,
        render(type) {
          let config = {
            1: "个人领用",
            2: "部门领用",
            3: "活动领用",
          };
          return config[type];
        },
      },
      {
        title: "物品数量",
        dataIndex: "amount",
        editable: true,
      },
      {
        title: "当前状态",
        dataIndex: "state",
        editable: true,
        render(state) {
          let config = {
            1: "部门未审核",
            2: "部门审核未通过",
            3: "部门审核通过",
            4: "总务审核未通过",
            5: "总务审核通过",
            6: "已发放",
          };
          return config[state];
        },
      },
      {
        title: '操作',
        dataIndex: 'operation',
        render: (text, record) =>
          this.state.dataSource.length >= 1 ? (
            <Popconfirm title="是否删除?" onConfirm={() => this.handleDelete(record.key)}>
              <a>删除</a>
            </Popconfirm>
            
          ) : null,
      },
    ];
    this.state = {
      dataSource: [ 
        {
          key: "1",
          number: "SL765438291",
          department: 1,
          date: "2019-10-11",
          type: 2,
          amount: 6,
          state: 6,
        },
        {
          key: "2",
          number: "SL276539400",
          department: 1,
          date: "2020-09-23",
          type: 1,
          amount: 67,
          state: 5,
        },
        {
          key: "3",
          number: "SL654390753",
          department: 3,
          date: "2020-11-03",
          type: 1,
          amount: 20,
          state: 4,
        },
        {
          key: "4",
          number: "SL975482384",
          department: 2,
          date: "2020-11-13",
          type: 1,
          amount: 46,
          state: 2,
        },
        {
          key: "5",
          number: "SL238569025",
          department: 2,
          date: "2020-11-28",   
          type: 3,
          amount: 93,
          state: 4,
        },
        {
          key: "6",
          number: "SL532468736",
          department: 2,
          date: "2020-10-09",
          type: 2,
          amount: 100,
          state: 1,
        },
        {
          key: "7",
          number: "SL879043217",
          department: 1,
          date: "2020-09-01",
          type: 1,
          amount: 230,
          state: 3,
        },
        {
          key: "8",
          number: "SL940510978",
          department: 2,
          date: "2020-02-21",
          type: 3,
          amount: 100,
          state: 6,
        },
        {
          key: "9",
          number: "SL987654329",
          department: 4,
          date: "2020-03-05",
          type: 1,
          amount: 84,
          state: 5,
        },
        {
          key: "10",
          number: "SL987630210",
          department: 3,
          date: "2020-06-19",
          type: 2,
          amount: 35,
          state: 2,
        },
        {
          key: "11",
          number: "SL986543211",
          department: 4,
          date: "2020-01-04",
          type: 1,
          amount: 83,
          state: 3,
        },
      ],
      count: 12,
    };
  }

  handleDelete = (key) => {
    const dataSource = [...this.state.dataSource];
    this.setState({
      dataSource: dataSource.filter((item) => item.key !== key),
    });
  };
  handleAdd = () => {
    const { count, dataSource } = this.state;
    const newData = {
      key: count,
      number: `SL${Math.floor(Math.random()*99999999 + 1)}${count}`,
      department: Math.floor(Math.random()*4 + 1),
      date: `2020-12-${Math.floor(Math.random()*30 + 1)}`,
      type: Math.floor(Math.random()*3 + 1),
      amount: Math.floor(Math.random()*100 + 1),
      state: Math.floor(Math.random()*6 + 1),
    };
    this.setState({
      dataSource: [...dataSource, newData],
      count: count + 1,
    });
  };
  handleSave = (row) => {
    const newData = [...this.state.dataSource];
    const index = newData.findIndex((item) => row.key === item.key);
    const item = newData[index];
    newData.splice(index, 1, { ...item, ...row });
    this.setState({
      dataSource: newData,
    });
  };
  render() {
    const { dataSource } = this.state;
    const components = {
      body: {
        row: EditableRow,
        cell: EditableCell,
      },
    };
    const columns = this.columns.map((col) => {
      if (!col.editable) {
        return col;
      } return {
        ...col,
        onCell: (record) => ({
          record,
          editable: col.editable,
          dataIndex: col.dataIndex,
          title: col.title,
          handleSave: this.handleSave,
        }),
      };
    });
    return (
      <Container>
        <Button
          onClick={this.handleAdd}
          type="primary"
          style={{
            marginBottom: 16,
          }}
        >
          + 申领单
        </Button>
        <div className="applys_t">
          <Space direction="vertical" size={12}>
             
            <RangePicker locale={locale}/>
          </Space>
          <div className="departments">
            <select onChange={this.handleChange}>
              <option value="全部申领部门">全部申领部门</option>
              <option value="教务处">教务处</option>
              <option value="办公室">办公室</option>
              <option value="信息中心">信息中心</option>
              <option value="总务处">总务处</option>
            </select>
          </div>
          <div className="types">
            <select onChange={this.handleChange}>
              <option value="全部领用类型">全部领用类型</option>
              <option value="个人领用"> 个人领用</option>
              <option value="部门领用">部门领用</option>
              <option value="活动领用">活动领用</option>
            </select>
          </div>
          <div className="audits">
            <select onChange={this.handleChange}>
              <option value="全部审核状态">全部审核状态</option>
              <option value="部门未审核">部门未审核</option>
              <option value="部门审核未通过">部门审核未通过</option>
              <option value="部门审核通过">部门审核通过</option>
              <option value="总务审核未通过">总务审核未通过</option>
              <option value="总务审核通过">总务审核通过</option>
              <option value="已发放">已发放</option>
            </select>
          </div>
        </div>
        <Table
          components={components}
          rowClassName={() => 'editable-row'}
          bordered
          dataSource={dataSource}
          columns={columns}
        />
      </Container>
    );
  }
}

export default index;

